<template>
	<view class="order_list">
		<view class="order_one" v-for="item in phyList" :key="item._id">
			<view>体检套餐：{{item.phy_name}}</view>
			<view>体检人：{{item.name}}</view>
			<view>体检时间：{{item.phy_time}}</view>
			<view>体检地点：{{item.address}}</view>
			<view>订单编号：{{item.order_number}}</view>
			<view class="price">{{item.price}}￥</view>
			<view class="btn">
				<view>
					<button :type="item.cancel?'primary':''"  @click="toClose(item._id)">取消预约</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {getPhyOrder,cancalPhy} from '@/api/user.js'
	import {ref} from 'vue'
	let phyList=ref([])
	let getList=async ()=>{
		let res=await getPhyOrder();
		console.log(res,"获取到的体检预约列表")
		phyList.value=res.data;
	}
	getList();
	
	// 取消订单接口
	let toClose=async (id)=>{
		let res=await cancalPhy(id);
		uni.showToast({
			title:"取消成功"
		})
		getList();
	}
</script>

<style lang="scss">
	.order_list{
		.order_one{
			height: 500rpx;
			display: flex;
			flex-direction:column;
			justify-content: space-around;
			padding: 20px;
			box-sizing: border-box;
			background-color: skyblue;
			margin-top: 20px;
			font-size: 16px;
			.btn{
				display: flex;
				justify-content: flex-end;
			}
			.price{
				display: flex;
				justify-content: flex-end;
				font-size: 20px;
				color:red;
			}
		}
	}
</style>